<template>
  <audio hidden="true" ref="audio" loop controls>
    <source src="./assets/woop.mp3" type="audio/mpeg" />
  </audio>
  <div class="container">
      <da-zhong v-if="!model" />
      <si-chuan v-else />
 </div>
 <div  class='change_model'>
  <div @click='changeModel(1)' > &nbsp;<span>{{model?'切换为大众麻将':'切换为四川麻将'}}</span> </div>
  <div style='height:2px;background:#000;'></div>
  <div @click='changeModel(2)' > &nbsp;<span>{{model2?'切换为手动摸牌':'切换为自动摸牌'}}</span> </div>
  <div style='height:2px;background:#000;'></div>
  <div @click='changeModel(3)' > &nbsp;<span>{{model3?'声音：✓':'声音：✗'}}</span> </div>
 </div>
    <div class="tips">
      <div>
      庄四你别三,严防是勾连。看庄是救己,能碰不迟延。
      中局心紧张,听胡两头忙。生张点炮易,熟张也要防。 
      先打一和二,紧防三与六。临危打生张,大牌握在手。
        听牌打五万,小心一和四。慎打六九万,胡了也没治。
          好牌卡二八,上听能跑车。晾喜再镇会,杠开是自摸。
          能吃就要吃,能碰就要碰。点炮无所谓,上听不要命。 
          手气财气高,牌来张张好。只是在娱乐,输赢不重要。
          <br />
          <br />
          因为只有一个人摸牌所以没有碰，但有杠
          <br />
          <br />
          做的简陋，若有问题，敬请评论.. 
          <br />
          <br />
          <span style="color:#fff">胡了有彩蛋哦！</span>
      </div>
     </div>
</template>

<script >
import DaZhong from './components/DaZhong.vue'
import SiChuan from './components/SiChuan.vue'
import {reactive,ref,getCurrentInstance,defineComponent,toRefs, onMounted} from "vue"
export default defineComponent({
  name:"App",
  components:{DaZhong,SiChuan},
  setup() {
   const data = reactive({
      model: false,  // false大众模式or true四川
      model2:false, //false 手动  true自动
      model3:false, //false 声音关闭状态  true声音开启状态
   })
   const changeModel = (index)=> {
     if(index==1){
       data.model = !data.model
     }else if(index==2){
       data.model2 = !data.model2
     }else if(index==3){
       data.model3 = !data.model3
       if(data.model3){
        audio.value.volume = 0.1
        audio.value.play()
       }else{
        audio.value.pause()
       }
     }
     localStorage.setItem('model',data.model)
     localStorage.setItem('model2',data.model2)
     localStorage.setItem('model3',data.model3)
   }
    const audio = ref();
   onMounted(()=>{
     data.model = JSON.parse(localStorage.getItem('model'))
     data.model2 = JSON.parse(localStorage.getItem('model2'))
     data.model3 = JSON.parse(localStorage.getItem('model3'))
   })
    return {
    ...toRefs(data),
    changeModel,
    audio
    }
  }
})
</script>
<style>
#app {
  width: 100%;
  margin: 0;
  padding: 0;

}
.container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
}
.change_model{
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background:gray;
  cursor: pointer;
}
.change_model div{
  height: 49px;
  line-height: 49px;
}
.tips{
  background: url('./assets/hover.png') no-repeat center center;
  width: 100px;
  height: 200px;
  background-size: contain;
  position: absolute;
  right: 15%;
  top: 0;
}
.tips div{
  display:none;
  transition:width 2s, height 2s, background 2s, transform 2s; 
}
.tips:hover div{
  display:inline-block;
  background: url('./assets/tips.jpg') no-repeat center center;
  width: 400px;
  height: 400px;
  background-size: contain;
  position: absolute;
  right: -150px;
  top: 0;
  color:rgba(172, 255, 47, 0.919);
  font-size:20px;
  padding:20px;

}
</style>
